<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .svgItem {
        background: aqua;
        width: 100px;
    }

    

    .animate {
        animation: move_right 1.1s cubic-bezier(0, 0,0,1) infinite;
        
    }

    @keyframes move_right {
        0% {
            opacity: 1;
            margin-left: -140px;
            position: absolute;

        }
        100% {
            opacity: 1;
            position: absolute;
            margin-left: -0px;
            z-index: 999;
        }
    }

    .box {
        height: 100px;
        width: 100px;
        background-color: lightpink;
        
    }
 
    .box:hover {
        width: 200px;
        transition: all 1s 0.5s cubic-bezier(0.0, 1.0, 1.0, 1.0);
    }
</style>

<body>
    <!-- 第一步：定义：绘制时所占用的空间大小,0 0 表示x轴和y有的起始位置,即可视区View中哪个位置开始显示（可见） -->
    <!-- 后面100 100表示长和宽但是只是一个数量，不会有具体的长度.这里的100只是表示一个比例关系 -->
    <svg viewBox="0 0 100 100" class="svgItem box ">
        <!-- 第二步：绘制矩形,在y为1/10的时候进行绘制 -->
        <!-- <rect x="0" y="10" width="10" height="10"></rect> -->
        <!-- 第二步：绘制三角形 双数分别代表着x，y，单数则是不出现东西 -->
        <!-- <polygon points="0,10,10,10,0,0"></polygon> -->
        <!-- 第二步：绘制圆形 -->
        <circle cx="45" cy="45" r="5" class="animate"></circle>
        <!-- 第二步：绘制线段 -->
        <!-- <line stroke="black" x1="0" y1="0" x2="20" y2="0" stroke-width="10"></line> -->
        <!-- 第二步：绘制折线 -->
        <polyline points="0,0,10,10,15,20" fill="transparent" stroke="black" stroke-width="1"></polyline>
        <!-- 第二步：绘制文字 -->
        <!-- <text x="10" y="60" style="font-size: 24">hello </text> -->
        <!-- g标签可以加一个组 -->
    </svg>

</body>

</html>